背景

許多網頁時常會加入輪播圖的設計，用來放置活動訊息或是品牌視覺圖片，傳遞資訊及強化品牌形象。因此也有許多輪播圖的套件相繼而出，如：swpier、owl carousel，這兩個套件完整度高，可以做精細的客製化調整，垂直輪播、動畫效果...等，但本次的專案只需要單張圖片輪播、分頁導覽及上/下頁按鈕，因此選擇輕量的 Vue Carousel 套件。

安裝套件

npm install -S vue-carousel

註冊區域元件

<template>
   <carousel>
      <slide>
        Slide 1 Content
      </slide>
      <slide>
        Slide 2 Content
      </slide>
    </carousel>
</template>

<script>
    import { Carousel, Slide } from 'vue-carousel';
    export default {
      components: {
        Carousel,
        Slide
    }
};
</script>

客製化 API

• 一次顯示的輪播數量(預設2個，調整為1個)
  Type: Number
  Default: 2

<carousel :perPage="1">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
</carousel>

• 自動播放(預設關閉，調整為開啟)
  Type: Boolean
  Default: false

<carousel :autoplay="ture">
    ...
</carousel>

• 上下頁按鈕(預設隱藏，調整為顯示)
  Type: Boolean
  Default: false

<carousel :navigationEnabled="ture">
    ...
</carousel>

• 換頁導覽的顏色(預設灰色，調整為白色)
  Type: String
  Default: #efefef

<carousel :paginationColor="'#FFF'">
    ...
</carousel>

資料來源：
https://ssense.github.io/vue-carousel/guide/
https://smlpoints.com/notes-vue-carousel-introduction.html